<!--
用于展示未处理的JS错误信息
@author pan
@createDate 2022/02 2022/2/26 22:22
-->
<script setup lang="ts" name="UnHandlerErrorContent">
export interface ErrorInfoType {
  name: string
  message: string
  stack: string | undefined
  vueInfo: string | undefined
}

defineProps<{
  errorInfo: ErrorInfoType
}>()
</script>

<template>
  <ul class="errorContent">
    <li>
      <strong>异常名称:</strong><span>{{ errorInfo.name }}</span>
    </li>
    <li>
      <strong>异常信息:</strong><span>{{ errorInfo.message }}</span>
    </li>
    <li>
      <strong>Vue提示信息:</strong><span>{{ errorInfo.vueInfo }}</span>
    </li>
    <li>
      <strong>异常堆栈:</strong>
      <pre>{{ errorInfo.stack }}</pre>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.errorContent {
  list-style: none;
  margin: 0;
  padding: 0;
  span {
    font-size: 12px;
  }
  strong {
    display: inline-block;
    margin-right: 5px;
    font-size: 12px;
  }
  pre {
    margin: 0;
    overflow: auto;
    width: 260px;
    font-size: 12px;
  }
}
</style>
